@rbxts/uiblox 0.2.0-alpha.36 → 0.2.0-alpha.37

package/out/ui/packages/collapse/init.luau

@@ -0,0 +1,6 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Collapse = TS.import(script, script, "components", "Collapse").default
+exports.collapseOpen = TS.import(script, script, "components", "collapseOpen").collapseOpen
+return exports

package/out/ui/packages/colorPicker/components/ColorSequenceEditor.luau

@@ -14,6 +14,8 @@ local insertColorStop = _sequenceValue.insertColorStop
 local patchColorStop = _sequenceValue.patchColorStop
 local readColorStops = _sequenceValue.readColorStops
 local removeColorStop = _sequenceValue.removeColorStop
+local sequenceMove = _sequenceValue.sequenceMove
+local sequencePress = _sequenceValue.sequencePress
 local writeColorStops = _sequenceValue.writeColorStops
 local function ColorSequenceEditor(props)
 	local _binding = props
@@ -73,7 +75,7 @@ local function ColorSequenceEditor(props)
 	_attributes_2.Active = active
 	_attributes_2.Event = {
 		InputBegan = function(rbx, input)
-			if not active or input.UserInputType ~= Enum.UserInputType.MouseButton1 then
+			if not active or not sequencePress(input.UserInputType.Name) then
 				return nil
 			end
 			local alpha = atAlpha(rbx, input.Position)
@@ -106,7 +108,7 @@ local function ColorSequenceEditor(props)
 			setSelected(hitStop(_newValue_1, alpha, 1))
 		end,
 		InputChanged = function(rbx, input)
-			if not dragging.current or input.UserInputType ~= Enum.UserInputType.MouseMovement then
+			if not dragging.current or not sequenceMove(input.UserInputType.Name) then
 				return nil
 			end
 			commit(patchColorStop(stops, index, {

package/out/ui/packages/colorPicker/components/NumberSequenceEditor.luau

@@ -14,6 +14,8 @@ local insertNumberStop = _sequenceValue.insertNumberStop
 local patchNumberStop = _sequenceValue.patchNumberStop
 local readNumberStops = _sequenceValue.readNumberStops
 local removeNumberStop = _sequenceValue.removeNumberStop
+local sequenceMove = _sequenceValue.sequenceMove
+local sequencePress = _sequenceValue.sequencePress
 local writeNumberStops = _sequenceValue.writeNumberStops
 local function NumberSequenceEditor(props)
 	local _binding = props
@@ -75,7 +77,7 @@ local function NumberSequenceEditor(props)
 	_attributes_2.Active = active
 	_attributes_2.Event = {
 		InputBegan = function(rbx, input)
-			if not active or input.UserInputType ~= Enum.UserInputType.MouseButton1 then
+			if not active or not sequencePress(input.UserInputType.Name) then
 				return nil
 			end
 			local alpha = atAlpha(rbx, input.Position)
@@ -108,7 +110,7 @@ local function NumberSequenceEditor(props)
 			setSelected(hitStop(_newValue_1, alpha, 1))
 		end,
 		InputChanged = function(rbx, input)
-			if not dragging.current or input.UserInputType ~= Enum.UserInputType.MouseMovement then
+			if not dragging.current or not sequenceMove(input.UserInputType.Name) then
 				return nil
 			end
 			commit(patchNumberStop(stops, index, {

package/out/ui/packages/colorPicker/components/sequenceValue.d.ts

@@ -23,4 +23,6 @@ export declare function sampleNumber(stops: NumberStop[], time: number): {
 export declare function insertNumberStop(stops: NumberStop[], time: number): NumberStop[];
 export declare function patchNumberStop(stops: NumberStop[], index: number, patch: Partial<NumberStop>): NumberStop[];
 export declare function removeNumberStop(stops: NumberStop[], index: number): NumberStop[];
+export declare function sequencePress(kind: string): kind is "MouseButton1" | "Touch";
+export declare function sequenceMove(kind: string): kind is "MouseMovement" | "Touch";
 export declare function hitStop(times: number[], alpha: number, threshold: number): number;

package/out/ui/packages/colorPicker/components/sequenceValue.luau

@@ -277,6 +277,12 @@ local function removeNumberStop(stops, index)
 	end
 	return updated
 end
+local function sequencePress(kind)
+	return kind == "MouseButton1" or kind == "Touch"
+end
+local function sequenceMove(kind)
+	return kind == "MouseMovement" or kind == "Touch"
+end
 local function hitStop(times, alpha, threshold)
 	local best = -1
 	local distance = threshold
@@ -303,5 +309,7 @@ return {
 	insertNumberStop = insertNumberStop,
 	patchNumberStop = patchNumberStop,
 	removeNumberStop = removeNumberStop,
+	sequencePress = sequencePress,
+	sequenceMove = sequenceMove,
 	hitStop = hitStop,
 }

package/out/ui/packages/colorPicker/index.d.ts

@@ -6,6 +6,6 @@ export { default as NumberSequenceEditor } from "./components/NumberSequenceEdit
 export { NumberSequenceEditorProps } from "./components/NumberSequenceEditor";
 export { byteToUnit, channelToByte, colorToHex, hsvToColor3, hsvToRgb, parseByte, parseHex, resolveHsv, rgbToHsv, sameColor, } from "./components/colorValue";
 export { Hsv } from "./components/colorValue";
-export { hitStop, insertColorStop, insertNumberStop, lerpColor, patchColorStop, patchNumberStop, readColorStops, readNumberStops, removeColorStop, removeNumberStop, sampleColor, sampleNumber, writeColorStops, writeNumberStops, } from "./components/sequenceValue";
+export { hitStop, insertColorStop, insertNumberStop, lerpColor, patchColorStop, patchNumberStop, readColorStops, readNumberStops, removeColorStop, removeNumberStop, sampleColor, sampleNumber, sequenceMove, sequencePress, writeColorStops, writeNumberStops, } from "./components/sequenceValue";
 export { ColorStop, NumberStop } from "./components/sequenceValue";
 export { colorBytes, recentColors, rememberColor } from "./components/colorValue";

package/out/ui/packages/colorPicker/init.luau

@@ -28,6 +28,8 @@ exports.removeColorStop = _sequenceValue.removeColorStop
 exports.removeNumberStop = _sequenceValue.removeNumberStop
 exports.sampleColor = _sequenceValue.sampleColor
 exports.sampleNumber = _sequenceValue.sampleNumber
+exports.sequenceMove = _sequenceValue.sequenceMove
+exports.sequencePress = _sequenceValue.sequencePress
 exports.writeColorStops = _sequenceValue.writeColorStops
 exports.writeNumberStops = _sequenceValue.writeNumberStops
 local _colorValue_1 = TS.import(script, script, "components", "colorValue")

package/out/ui/packages/copyButton/components/CopyButton.d.ts

@@ -0,0 +1,8 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface CopyButtonProps {
+    text: string;
+    onCopy?: (text: string) => void;
+    disabled?: boolean;
+}
+declare function CopyButton(props: CustomizedProps<TextButton, CopyButtonProps>): JSX.Element;
+export default CopyButton;

package/out/ui/packages/copyButton/components/CopyButton.luau

@@ -0,0 +1,32 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Button = TS.import(script, script.Parent.Parent.Parent, "button").Button
+local copyInvoke = TS.import(script, script.Parent, "copyInvoke").copyInvoke
+local function CopyButton(props)
+	local _binding = props
+	local text = _binding.text
+	local onCopy = _binding.onCopy
+	local disabled = _binding.disabled
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	return React.createElement(Button, {
+		id = id,
+		ref = ref,
+		className = className,
+		sx = sx,
+		text = "Copy",
+		size = "small",
+		variant = "text",
+		disabled = disabled,
+		onLeftClick = function()
+			return copyInvoke(text, onCopy)
+		end,
+	})
+end
+local default = CopyButton
+return {
+	default = default,
+}

package/out/ui/packages/copyButton/components/copyInvoke.d.ts

@@ -0,0 +1,2 @@
+/** Hands the string to the caller. Does nothing when there is no callback. */
+export declare function copyInvoke(text: string, onCopy?: (text: string) => void): string | undefined;

package/out/ui/packages/copyButton/components/copyInvoke.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+--* Hands the string to the caller. Does nothing when there is no callback. 
+local function copyInvoke(text, onCopy)
+	if onCopy == nil then
+		return nil
+	end
+	onCopy(text)
+	return text
+end
+return {
+	copyInvoke = copyInvoke,
+}

package/out/ui/packages/copyButton/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CopyButton } from "./components/CopyButton";
+export { CopyButtonProps } from "./components/CopyButton";
+export { copyInvoke } from "./components/copyInvoke";

package/out/ui/packages/copyButton/init.luau

@@ -0,0 +1,6 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.CopyButton = TS.import(script, script, "components", "CopyButton").default
+exports.copyInvoke = TS.import(script, script, "components", "copyInvoke").copyInvoke
+return exports

package/out/ui/packages/cover/components/Cover.d.ts

@@ -0,0 +1,8 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface CoverProps {
+    value?: number;
+    children?: React.ReactNode;
+}
+declare function Cover(props: CustomizedProps<Frame, CoverProps>): JSX.Element;
+export default Cover;

package/out/ui/packages/cover/components/Cover.luau

@@ -0,0 +1,47 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local coverFill = TS.import(script, script.Parent, "coverFill").coverFill
+local function Cover(props)
+	local _binding = props
+	local value = _binding.value
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local fill = coverFill(value)
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Cover"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = {
+		Size = UDim2.new(1, 0, 1, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		ClipsDescendants = true,
+	}
+	_attributes.className = className
+	_attributes.sx = sx
+	return React.createElement(SxHost, _attributes, children, if fill > 0 then (React.createElement("frame", {
+		key = "Shade",
+		Size = UDim2.new(1, 0, fill, 0),
+		BackgroundColor3 = theme.palette.backdrop,
+		BackgroundTransparency = 0.35,
+		BorderSizePixel = 0,
+		ZIndex = 2,
+	})) else nil)
+end
+local default = Cover
+return {
+	default = default,
+}

package/out/ui/packages/cover/components/coverFill.d.ts

@@ -0,0 +1,2 @@
+/** Remaining fraction of the child to shade. Zero when there is nothing left. */
+export declare function coverFill(value?: number): number;

package/out/ui/packages/cover/components/coverFill.luau

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+--* Remaining fraction of the child to shade. Zero when there is nothing left. 
+local function coverFill(value)
+	if value == nil or value <= 0 then
+		return 0
+	end
+	if value >= 1 then
+		return 1
+	end
+	return value
+end
+return {
+	coverFill = coverFill,
+}

package/out/ui/packages/cover/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Cover } from "./components/Cover";
+export { CoverProps } from "./components/Cover";
+export { coverFill } from "./components/coverFill";

package/out/ui/packages/cover/init.luau

@@ -0,0 +1,6 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Cover = TS.import(script, script, "components", "Cover").default
+exports.coverFill = TS.import(script, script, "components", "coverFill").coverFill
+return exports

package/out/ui/packages/dateRange/components/DateRangePicker.d.ts

@@ -6,6 +6,9 @@ export interface DateRangePickerProps {
     value: DateSpan;
     onChange: (value: DateSpan) => void;
     onMonthChange: (year: number, month: number) => void;
+    view?: "month" | "week";
+    anchor?: number;
+    onAnchorChange?: (stamp: number) => void;
 }
 declare function DateRangePicker(props: CustomizedProps<Frame, DateRangePickerProps>): JSX.Element;
 export default DateRangePicker;

package/out/ui/packages/dateRange/components/DateRangePicker.luau

@@ -8,8 +8,10 @@ local dateStamp = _dateRangeValue.dateStamp
 local daysInMonth = _dateRangeValue.daysInMonth
 local formatStamp = _dateRangeValue.formatStamp
 local orderSpan = _dateRangeValue.orderSpan
+local shiftDay = _dateRangeValue.shiftDay
 local shiftMonth = _dateRangeValue.shiftMonth
 local weekday = _dateRangeValue.weekday
+local weekStamps = _dateRangeValue.weekStamps
 local MONTHS = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" }
 local WEEKDAYS = { "S", "M", "T", "W", "T", "F", "S" }
 local function covers(stamp, value)
@@ -30,10 +32,20 @@ local function DateRangePicker(props)
 	local value = _binding.value
 	local onChange = _binding.onChange
 	local onMonthChange = _binding.onMonthChange
+	local view = _binding.view
+	local anchor = _binding.anchor
+	local onAnchorChange = _binding.onAnchorChange
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local weekMode = view == "week"
+	local _condition = anchor
+	if _condition == nil then
+		_condition = dateStamp(year, month, 1)
+	end
+	local anchorStamp = _condition
+	local week = if weekMode then weekStamps(anchorStamp) else {}
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
 	local lead = weekday(year, month, 1)
@@ -87,17 +99,37 @@ local function DateRangePicker(props)
 		end
 	end
 	local move = function(delta)
+		if weekMode then
+			local moved = shiftDay(anchorStamp, delta * 7)
+			local _result = onAnchorChange
+			if _result ~= nil then
+				_result(moved)
+			end
+			onMonthChange(math.floor(moved / 10000), math.floor(moved / 100) % 100)
+			return nil
+		end
 		local shifted = shiftMonth(year, month, delta)
 		onMonthChange(shifted.year, shifted.month)
 	end
+	local _result
+	if weekMode and #week == 7 then
+		_result = `{formatStamp(week[1])} – {formatStamp(week[7])}`
+	else
+		local _condition_1 = MONTHS[month]
+		if _condition_1 == nil then
+			_condition_1 = ""
+		end
+		_result = `{_condition_1} {year}`
+	end
+	local title = _result
 	local _attributes = {
 		tag = "frame",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "DateRangePicker"
+	local _condition_1 = id
+	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
+		_condition_1 = "DateRangePicker"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_1
 	_attributes.hostRef = ref
 	_attributes.base = {
 		Size = UDim2.new(1, 0, 0, 0),
@@ -118,9 +150,14 @@ local function DateRangePicker(props)
 		Padding = UDim.new(0, 8),
 		SortOrder = Enum.SortOrder.LayoutOrder,
 	})
-	local _exp_2 = React.createElement("textbutton", {
-		Text = "Prev",
-		Size = UDim2.fromOffset(56, 28),
+	local _exp_2 = React.createElement("frame", {
+		Size = UDim2.new(1, 0, 0, 28),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		LayoutOrder = 0,
+	}, React.createElement("textbutton", {
+		Text = if weekMode then "Earlier" else "Prev",
+		Size = UDim2.fromOffset(if weekMode then 72 else 56, 28),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		TextColor3 = theme.palette.text.secondary,
@@ -131,31 +168,21 @@ local function DateRangePicker(props)
 				return move(-1)
 			end,
 		},
-	})
-	local _attributes_1 = {}
-	local _condition_1 = MONTHS[month]
-	if _condition_1 == nil then
-		_condition_1 = ""
-	end
-	_attributes_1.Text = `{_condition_1} {year}`
-	_attributes_1.AnchorPoint = Vector2.new(0.5, 0)
-	_attributes_1.Position = UDim2.fromScale(0.5, 0)
-	_attributes_1.Size = UDim2.fromOffset(140, 28)
-	_attributes_1.BackgroundTransparency = 1
-	_attributes_1.BorderSizePixel = 0
-	_attributes_1.TextColor3 = theme.palette.text.primary
-	_attributes_1.Font = theme.typography.fontFamilies.semibold
-	_attributes_1.TextSize = theme.typography.fontSizes.body
-	local _exp_3 = React.createElement("frame", {
-		Size = UDim2.new(1, 0, 0, 28),
+	}), React.createElement("textlabel", {
+		Text = title,
+		AnchorPoint = Vector2.new(0.5, 0),
+		Position = UDim2.fromScale(0.5, 0),
+		Size = UDim2.fromOffset(if weekMode then 200 else 140, 28),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		LayoutOrder = 0,
-	}, _exp_2, React.createElement("textlabel", _attributes_1), React.createElement("textbutton", {
-		Text = "Next",
+		TextColor3 = theme.palette.text.primary,
+		Font = theme.typography.fontFamilies.semibold,
+		TextSize = theme.typography.fontSizes.body,
+	}), React.createElement("textbutton", {
+		Text = if weekMode then "Later" else "Next",
 		AnchorPoint = Vector2.new(1, 0),
 		Position = UDim2.fromScale(1, 0),
-		Size = UDim2.fromOffset(56, 28),
+		Size = UDim2.fromOffset(if weekMode then 72 else 56, 28),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		TextColor3 = theme.palette.text.secondary,
@@ -167,7 +194,7 @@ local function DateRangePicker(props)
 			end,
 		},
 	}))
-	local _exp_4 = React.createElement("textlabel", {
+	local _exp_3 = React.createElement("textlabel", {
 		Text = if value.start == nil then "Choose a start and finish" elseif value.finish == nil then formatStamp(value.start) else `{formatStamp(value.start)} – {formatStamp(value.finish)}`,
 		Size = UDim2.new(1, 0, 0, 16),
 		BackgroundTransparency = 1,
@@ -178,74 +205,126 @@ local function DateRangePicker(props)
 		TextSize = theme.typography.fontSizes.caption,
 		LayoutOrder = 1,
 	})
-	local _exp_5 = React.createElement("uigridlayout", {
-		CellSize = UDim2.fromOffset(36, 28),
-		CellPadding = UDim2.fromOffset(4, 4),
-		FillDirectionMaxCells = 7,
-		SortOrder = Enum.SortOrder.LayoutOrder,
-	})
-	-- ▼ ReadonlyArray.map ▼
-	local _newValue = table.create(#WEEKDAYS)
-	local _callback = function(label, index)
-		return React.createElement("textlabel", {
-			key = `week-{index}`,
-			Text = label,
-			LayoutOrder = index,
+	local _result_1
+	if weekMode then
+		local _exp_4 = React.createElement("uilistlayout", {
+			FillDirection = Enum.FillDirection.Horizontal,
+			Padding = UDim.new(0, 4),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		})
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#week)
+		local _callback = function(stamp, index)
+			local chosen = covers(stamp, value)
+			local endpoint = stamp == value.start or stamp == value.finish
+			local _attributes_1 = {
+				key = `week-{stamp}`,
+			}
+			local _condition_2 = WEEKDAYS[index + 1]
+			if _condition_2 == nil then
+				_condition_2 = ""
+			end
+			_attributes_1.Text = `{_condition_2}\n{stamp % 100}`
+			_attributes_1.LayoutOrder = index
+			_attributes_1.Size = UDim2.new(1 / 7, -4, 1, 0)
+			_attributes_1.BackgroundColor3 = if chosen then theme.palette.primary.main else theme.palette.surface.input
+			_attributes_1.BackgroundTransparency = if chosen and not endpoint then 0.55 else 0
+			_attributes_1.BorderSizePixel = 0
+			_attributes_1.TextColor3 = if endpoint then theme.palette.primary.on else theme.palette.text.primary
+			_attributes_1.Font = theme.typography.fontFamilies.default
+			_attributes_1.TextSize = theme.typography.fontSizes.caption
+			_attributes_1.TextWrapped = true
+			_attributes_1.AutoButtonColor = false
+			_attributes_1.Event = {
+				Activated = function()
+					return pick(stamp)
+				end,
+			}
+			return React.createElement("textbutton", _attributes_1, React.createElement("uicorner", {
+				CornerRadius = UDim.new(0, 4),
+			}))
+		end
+		for _k, _v in week do
+			_newValue[_k] = _callback(_v, _k - 1, week)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_result_1 = (React.createElement("frame", {
+			Size = UDim2.new(1, 0, 0, 56),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			TextColor3 = theme.palette.text.secondary,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.caption,
+			LayoutOrder = 2,
+		}, _exp_4, _newValue))
+	else
+		local _exp_4 = React.createElement("uigridlayout", {
+			CellSize = UDim2.fromOffset(36, 28),
+			CellPadding = UDim2.fromOffset(4, 4),
+			FillDirectionMaxCells = 7,
+			SortOrder = Enum.SortOrder.LayoutOrder,
 		})
-	end
-	for _k, _v in WEEKDAYS do
-		_newValue[_k] = _callback(_v, _k - 1, WEEKDAYS)
-	end
-	-- ▲ ReadonlyArray.map ▲
-	-- ▼ ReadonlyArray.map ▼
-	local _newValue_1 = table.create(#cells)
-	local _callback_1 = function(cell)
-		local stamp = cell.stamp
-		local chosen = stamp ~= nil and covers(stamp, value)
-		local endpoint = stamp ~= nil and (stamp == value.start or stamp == value.finish)
-		if stamp == nil or cell.day == nil then
-			return React.createElement("frame", {
-				key = `blank-{cell.order}`,
-				LayoutOrder = 10 + cell.order,
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#WEEKDAYS)
+		local _callback = function(label, index)
+			return React.createElement("textlabel", {
+				key = `week-{index}`,
+				Text = label,
+				LayoutOrder = index,
 				BackgroundTransparency = 1,
 				BorderSizePixel = 0,
+				TextColor3 = theme.palette.text.secondary,
+				Font = theme.typography.fontFamilies.default,
+				TextSize = theme.typography.fontSizes.caption,
 			})
 		end
-		return React.createElement("textbutton", {
-			key = `day-{stamp}`,
-			Text = tostring(cell.day),
-			LayoutOrder = 10 + cell.order,
-			BackgroundColor3 = if chosen then theme.palette.primary.main else theme.palette.surface.input,
-			BackgroundTransparency = if chosen and not endpoint then 0.55 else 0,
+		for _k, _v in WEEKDAYS do
+			_newValue[_k] = _callback(_v, _k - 1, WEEKDAYS)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue_1 = table.create(#cells)
+		local _callback_1 = function(cell)
+			local stamp = cell.stamp
+			local chosen = stamp ~= nil and covers(stamp, value)
+			local endpoint = stamp ~= nil and (stamp == value.start or stamp == value.finish)
+			if stamp == nil or cell.day == nil then
+				return React.createElement("frame", {
+					key = `blank-{cell.order}`,
+					LayoutOrder = 10 + cell.order,
+					BackgroundTransparency = 1,
+					BorderSizePixel = 0,
+				})
+			end
+			return React.createElement("textbutton", {
+				key = `day-{stamp}`,
+				Text = tostring(cell.day),
+				LayoutOrder = 10 + cell.order,
+				BackgroundColor3 = if chosen then theme.palette.primary.main else theme.palette.surface.input,
+				BackgroundTransparency = if chosen and not endpoint then 0.55 else 0,
+				BorderSizePixel = 0,
+				TextColor3 = if endpoint then theme.palette.primary.on else theme.palette.text.primary,
+				Font = theme.typography.fontFamilies.default,
+				TextSize = theme.typography.fontSizes.body,
+				AutoButtonColor = false,
+				Event = {
+					Activated = function()
+						return pick(stamp)
+					end,
+				},
+			}, React.createElement("uicorner", {
+				CornerRadius = UDim.new(0, 4),
+			}))
+		end
+		for _k, _v in cells do
+			_newValue_1[_k] = _callback_1(_v, _k - 1, cells)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_result_1 = (React.createElement("frame", {
+			Size = UDim2.new(1, 0, 0, 248),
+			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			TextColor3 = if endpoint then theme.palette.primary.on else theme.palette.text.primary,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
-			AutoButtonColor = false,
-			Event = {
-				Activated = function()
-					return pick(stamp)
-				end,
-			},
-		}, React.createElement("uicorner", {
-			CornerRadius = UDim.new(0, 4),
-		}))
-	end
-	for _k, _v in cells do
-		_newValue_1[_k] = _callback_1(_v, _k - 1, cells)
+			LayoutOrder = 2,
+		}, _exp_4, _newValue, _newValue_1))
 	end
-	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_3, _exp_4, React.createElement("frame", {
-		Size = UDim2.new(1, 0, 0, 248),
-		BackgroundTransparency = 1,
-		BorderSizePixel = 0,
-		LayoutOrder = 2,
-	}, _exp_5, _newValue, _newValue_1))
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _exp_3, _result_1)
 end
 local default = DateRangePicker
 return {

package/out/ui/packages/dateRange/dateRangeValue.d.ts

@@ -16,3 +16,8 @@ export declare function dayIndex(stamp: number): number;
 export declare function nightsBetween(start: number, finish: number): number;
 export declare function formatStamp(stamp: number): string;
 export declare function formatSpan(value: DateSpan): string;
+/** Inverse of dayIndex. Day 1 is 1 Jan of year 1. */
+export declare function stampFromIndex(index: number): number;
+export declare function shiftDay(stamp: number, delta: number): number;
+/** Seven stamps, Sunday through Saturday, containing the day. */
+export declare function weekStamps(stamp: number): number[];