write components #1

src/components/animation/transparent.luau

@@ -0,0 +1,69 @@
+local vide = require(script.Parent.Parent.Parent.Parent.vide)
+
+local create = vide.create
+local source = vide.source
+local ref = vide.action
+local effect = vide.effect
+
+type can<T> = (() -> T) | T
+type props = {
+
+	size: can<UDim2>?,
+	position: can<UDim2>?,
+	anchor_point: can<Vector2>?,
+	automatic_size: can<Enum.AutomaticSize>?,
+
+	transparency: () -> number,
+	layer: Instance
+
+}
+
+return function(props: props)
+
+	local function display_canvas()
+		return props.transparency() > 0
+	end
+
+	local canvas = source()
+	local opaque = source()
+
+	effect(function()
+		if display_canvas() then
+			props.layer.Parent = canvas()
+		else
+			props.layer.Parent = opaque()
+		end
+	end)
+
+	return create "Frame" {
+		Name = "AnimationLayer",
+
+		Size = props.size or UDim2.fromScale(1, 1),
+		Position = props.position,
+		AnchorPoint = props.anchor_point,
+		AutomaticSize = props.automatic_size,
+		BackgroundTransparency = 1,
+
+		create "CanvasGroup" {
+			Name = "Transparent",
+
+			Size = UDim2.fromScale(1, 1),
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+
+			GroupTransparency = props.transparency,
+
+			ref(canvas)
+		},
+
+		create "Frame" {
+			Name = "Opaque",
+
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+
+			ref(opaque)
+		}
+
+	}
+end

src/components/controls/app_bar_button.luau

@@ -0,0 +1,33 @@
+local scheme = require(script.Parent.Parent.Parent.modules.scheme)
+local icon_button = require(script.Parent.icon_button)
+
+
+type can<T> = (() -> T) | T
+type props = {
+
+	icon: can<string>?,
+	text: can<string>?,
+	layout_order: can<number>?,
+
+	activated: (() -> ())?
+
+}
+
+return function(props: props)
+	return icon_button {
+
+		icon_size = UDim2.fromScale(0.5, 0.5),
+		icon = props.icon,
+		layout_order = props.layout_order,
+
+		foreground_color = scheme:consume().Color.Text.Secondary,
+
+		activated = props.activated,
+
+		layout = {
+			size = UDim2.fromScale(0.8, 0.8),
+			background_opacity = 1
+		}
+
+	}
+end

src/components/controls/app_tab_bar_button.luau

@@ -0,0 +1,51 @@
+local vide = require(script.Parent.Parent.Parent.Parent.vide)
+local icons = require(script.Parent.Parent.Parent.modules.icons)
+local scheme = require(script.Parent.Parent.Parent.modules.scheme)
+local tooltip = require(script.Parent.Parent.views.tooltip)
+local icon_button = require(script.Parent.icon_button)
+
+local read = vide.read
+local spring = vide.spring
+
+type can<T> = (() -> T) | T
+type props = {
+	icon: can<string>?,
+	state: (() -> boolean),
+	layout_order: can<number>?,
+
+	activated: (() -> ())?,
+
+}
+
+return function(props)
+
+	return icon_button {
+
+		icon = props.icon or icons["loader-2"],
+		icon_size = UDim2.fromScale(0.5, 0.5),
+
+		foreground_color = function()
+			return if read(props.state) then scheme:consume().Accent else scheme:consume().Color.Text.Secondary
+		end,
+		layout_order = props.layout_order,
+
+		activated = props.activated,
+
+		layout = {
+			size = UDim2.fromScale(0.8, 0.8),
+
+			background_color = scheme:consume().Accent,
+			background_opacity = spring(function()
+				return if read(props.state) then 0.9 else 1
+			end, 0.1),
+
+			tooltip {
+
+				text = props.text
+
+			}
+		},
+
+	}
+
+end

src/components/controls/base_button.luau

@@ -0,0 +1,90 @@
+local vide = require(script.Parent.Parent.Parent.Parent.vide)
+local constants = require(script.Parent.Parent.Parent.modules.constants)
+local scheme = require(script.Parent.Parent.Parent.modules.scheme)
+
+local create = vide.create
+local source = vide.source
+local spring = vide.spring
+local changed = vide.changed
+
+type can<T> = (() -> T) | T
+export type props = {
+
+	size: can<UDim2>?,
+	position: can<UDim2>?,
+	anchor_point: can<Vector2>?,
+
+	background_color: can<Color3>?,
+	background_opacity: can<number>?,
+	rounded_value: can<number>?,
+	layout_order: can<number>?,
+	zindex: can<number>?,
+
+	activated: (() -> ())?,
+	down: (() -> ())?,
+	up: (() -> ())?,
+
+	[number]: any
+
+}
+
+return function(props: props)
+
+	local gui_state = source(Enum.GuiState.Idle)
+
+	local function layer_opacity()
+		return
+			if gui_state() == Enum.GuiState.Press then 0.7
+			elseif gui_state() == Enum.GuiState.Hover then 0.85
+			else 1
+	end
+
+	return create "ImageButton" {
+
+		Name = "BaseButton",
+
+		Size = props.size or UDim2.fromOffset(200, 50),
+		Position = props.size or UDim2.fromScale(0, 0),
+		AnchorPoint = props.anchor_point or Vector2.new(0, 0),
+
+		BackgroundTransparency = 1,
+
+		Image = constants.rounded.id,
+		ImageColor3 = props.background_color or scheme:consume().Color.Text.Primary,
+		ImageTransparency = props.background_opacity or 0.85,
+		ScaleType = Enum.ScaleType.Slice,
+		SliceCenter = constants.rounded.center,
+		SliceScale = props.rounded_value or constants.rounded_values[8],
+
+		LayoutOrder = props.layout_order,
+
+		ZIndex = props.zindex or 1,
+
+		create "ImageLabel" {
+
+			Size = UDim2.fromScale(1, 1),
+
+			BackgroundTransparency = 1,
+
+			Image = constants.rounded.id,
+			ImageColor3 = Color3.new(),
+			ImageTransparency = spring(layer_opacity, 0.15),
+			ScaleType = Enum.ScaleType.Slice,
+			SliceCenter = constants.rounded.center,
+			SliceScale = props.rounded_value or constants.rounded_values[8],
+
+			ZIndex = 2
+
+		},
+
+		changed("GuiState", gui_state),
+
+		Activated = props.activated,
+		MouseButton1Down = props.down,
+		MouseButton1Up = props.up,
+
+		unpack(props)
+
+	}
+
+end

src/components/controls/icon_button.luau

@@ -0,0 +1,45 @@
+local vide = require(script.Parent.Parent.Parent.Parent.vide)
+local scheme = require(script.Parent.Parent.Parent.modules.scheme)
+local base_button = require(script.Parent.base_button)
+
+local create = vide.create
+
+type can<T> = (() -> T) | T
+export type props = {
+
+	icon: can<string>?,
+	icon_size: can<UDim2>?,
+	foreground_color: can<Color3>?,
+
+	activated: (() -> ())?,
+
+	layout: base_button.props?
+
+}
+
+return function(props: props)
+
+	local layout = props.layout or {}
+
+	layout.activated = props.activated
+
+	table.insert(layout, {
+		create "UIAspectRatioConstraint" {
+			AspectRatio = 1
+		},
+
+		create "ImageLabel" {
+			Size = props.icon_size or UDim2.fromScale(0.45, 0.45),
+			Position = UDim2.fromScale(0.5, 0.5),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+
+			BackgroundTransparency = 1,
+			Image = props.icon,
+			ImageColor3 = props.foreground_color or scheme:consume().Color.Text.Primary
+
+		}
+	})
+
+	return base_button(layout)
+
+end

src/components/controls/icon_text_button.luau

@@ -0,0 +1,87 @@
+local vide = require(script.Parent.Parent.Parent.Parent.vide)
+local scheme = require(script.Parent.Parent.Parent.modules.scheme)
+local base_button = require(script.Parent.base_button)
+
+local create = vide.create
+local read = vide.read
+
+type can<T> = (() -> T) | T
+export type props = {
+
+	icon: can<string>,
+	text: can<string>,
+	icon_size: can<UDim2>?,
+	foreground_color: can<Color3>?,
+	icon_layout_order: can<number>?,
+	zindex: can<number>?,
+
+	activated: (() -> ())?,
+
+	layout: base_button.props?
+
+}
+
+return function(props: props)
+
+	local layout = props.layout or {}
+
+	layout.activated = props.activated
+
+	table.insert(layout, {
+
+		create "Frame" {
+			Size = UDim2.fromScale(1, 1),
+
+			BackgroundTransparency = 1,
+
+			create "UIListLayout" {
+
+				Padding = UDim.new(0, 10),
+				FillDirection = Enum.FillDirection.Horizontal,
+				HorizontalAlignment = Enum.HorizontalAlignment.Center,
+				VerticalAlignment = Enum.VerticalAlignment.Center
+
+			},
+
+			create "ImageLabel" {
+
+				Size = UDim2.fromScale(0.45, 0.45),
+
+				BackgroundTransparency = 1,
+
+				Image = props.icon,
+				ImageColor3 = props.foreground_color or scheme:consume().Color.Text.Primary,
+				LayoutOrder = props.icon_layout_order,
+
+				create "UIAspectRatioConstraint" {
+					AspectRatio = 1
+				}
+
+			},
+
+			create "TextLabel" {
+
+				AutomaticSize = Enum.AutomaticSize.XY,
+				LayoutOrder = 1,
+
+				BackgroundTransparency = 1,
+
+				Font = scheme:consume().Typography.Button.Font,
+				Text = props.text,
+				TextColor3 = props.foreground_color or scheme:consume().Color.Text.Primary,
+				TextSize = scheme:consume().Typography.Button.Size,
+
+				Visible = function()
+					return read(props.text) ~= nil and read(props.text) ~= ""
+				end
+
+			}
+
+		}
+
+
+	})
+
+	return base_button(layout)
+
+end