(
type={type}
{...props}
className={clsx(
- "form-input block w-full rounded-md border-slate-300 text-sm shadow-sm placeholder:text-slate-300 focus:border-indigo-500 focus:ring-indigo-500 active:border-indigo-500 active:ring-indigo-500 disabled:text-slate-400",
+ "form-input block w-full rounded-sm border-gray-300 text-sm shadow-sm placeholder:text-gray-300 focus:border-blue-500 focus:ring-blue-500 active:border-blue-500 active:ring-blue-500 disabled:text-gray-400",
size === "normal" ? "h-10" : "h-8"
)}
/>
diff --git a/packages/ui/src/forms/styled/StyledRadio.tsx b/packages/ui/src/forms/styled/StyledRadio.tsx
index 6dbc9add2e..b0492b45cd 100644
--- a/packages/ui/src/forms/styled/StyledRadio.tsx
+++ b/packages/ui/src/forms/styled/StyledRadio.tsx
@@ -28,7 +28,7 @@ export function StyledRadio({ value, options, onChange }: StyledRadioProps) {
onChange={() => onChange(option.id)}
checked={option.id === value}
className={clsx(
- "form-radio text-indigo-500 focus:ring-transparent",
+ "form-radio text-blue-500 focus:ring-transparent",
option.disabled ? "cursor-not-allowed" : "cursor-pointer"
)}
disabled={option.disabled}
@@ -40,7 +40,7 @@ export function StyledRadio({ value, options, onChange }: StyledRadioProps) {
"text-sm font-medium",
option.disabled
? "cursor-not-allowed text-gray-400"
- : "cursor-pointer text-gray-600 group-hover:text-gray-900"
+ : "cursor-pointer text-gray-600 group-hover:text-gray-800"
)}
>
{option.name}
diff --git a/packages/ui/src/forms/styled/StyledTextArea.tsx b/packages/ui/src/forms/styled/StyledTextArea.tsx
index 6c21be99ab..80514c257a 100644
--- a/packages/ui/src/forms/styled/StyledTextArea.tsx
+++ b/packages/ui/src/forms/styled/StyledTextArea.tsx
@@ -16,8 +16,8 @@ export const StyledTextArea = forwardRef<
ref={ref}
{...props}
className={clsx(
- "form-input block w-full rounded-md border-slate-300 text-sm shadow-sm placeholder:text-slate-300 focus:border-indigo-500 focus:ring-indigo-500 active:border-indigo-500 active:ring-indigo-500"
- // disabled && "text-slate-400"
+ "form-input block w-full rounded-sm border-gray-300 text-sm shadow-sm placeholder:text-gray-300 focus:border-blue-500 focus:ring-blue-500 active:border-blue-500 active:ring-blue-500"
+ // disabled && "text-gray-400"
)}
/>
);
diff --git a/packages/ui/src/forms/styled/StyledToggle.tsx b/packages/ui/src/forms/styled/StyledToggle.tsx
new file mode 100644
index 0000000000..3d18973e6d
--- /dev/null
+++ b/packages/ui/src/forms/styled/StyledToggle.tsx
@@ -0,0 +1,52 @@
+import { Switch } from "@headlessui/react";
+import clsx from "clsx";
+
+export type StyledToggleProps = {
+ checked: boolean;
+ showFocusRing?: boolean;
+ size?: "medium" | "tiny";
+ onChange(newValue: boolean): void;
+};
+
+export function StyledToggle({
+ checked,
+ showFocusRing = true,
+ size = "medium",
+ onChange,
+}: StyledToggleProps) {
+ const sizeClasses = {
+ medium: {
+ toggle: "h-6 w-11",
+ circle: "h-5 w-5",
+ translate: "translate-x-5",
+ },
+ tiny: {
+ toggle: "h-3 w-5",
+ circle: "h-2 w-2",
+ translate: "translate-x-2",
+ },
+ };
+
+ const { toggle, circle, translate } = sizeClasses[size];
+
+ return (
+
+ Toggle
+
+ );
+}
diff --git a/packages/ui/src/icons/HeroIcons.tsx b/packages/ui/src/icons/HeroIcons.tsx
index d2efb02a19..9bc2a5348a 100644
--- a/packages/ui/src/icons/HeroIcons.tsx
+++ b/packages/ui/src/icons/HeroIcons.tsx
@@ -165,21 +165,33 @@ export const LinkIcon: FC
= (props) => (
);
export const ChevronRightIcon: FC = (props) => (
-
+
);
export const ChevronLeftIcon: FC = (props) => (
-
+
);
diff --git a/packages/ui/src/icons/Icon.tsx b/packages/ui/src/icons/Icon.tsx
index 5014a2698c..2c035f7b68 100644
--- a/packages/ui/src/icons/Icon.tsx
+++ b/packages/ui/src/icons/Icon.tsx
@@ -4,6 +4,11 @@ export type IconProps = PropsWithChildren<{
size?: number;
className?: string;
onClick?: () => void;
+ strokeWidth?: number;
+ stroke?: string;
+ strokeLinecap?: "butt" | "round" | "square";
+ strokeLinejoin?: "miter" | "round" | "bevel";
+ fill?: string;
}>;
export const Icon: FC = ({
@@ -11,15 +16,24 @@ export const Icon: FC = ({
className,
onClick,
viewBox = "0 0 20 20",
+ strokeWidth,
+ stroke,
+ strokeLinecap,
+ strokeLinejoin,
+ fill = "currentColor",
children,
}) => (
{children}
diff --git a/packages/ui/src/icons/IconByName.tsx b/packages/ui/src/icons/IconByName.tsx
new file mode 100644
index 0000000000..4872075a7d
--- /dev/null
+++ b/packages/ui/src/icons/IconByName.tsx
@@ -0,0 +1,153 @@
+import { FC } from "react";
+
+import {
+ Die1Icon,
+ Die2Icon,
+ Die3Icon,
+ Die4Icon,
+ Die5Icon,
+ Die6Icon,
+} from "./DieIcons.js";
+import { DotsHorizontalIcon } from "./DotsHorizontalIcon.js";
+import { EditIcon } from "./EditIcon.js";
+import { EmptyIcon } from "./EmptyIcon.js";
+import { ErrorIcon } from "./ErrorIcon.js";
+import { ExternalLinkIcon } from "./ExternalLinkIcon.js";
+import { FocusIcon } from "./FocusIcon.js";
+import {
+ AdjustmentsHorizontalIcon,
+ AdjustmentsVerticalIcon,
+ ArchiveBoxIcon,
+ BackwardIcon,
+ BarChartIcon,
+ Bars3CenterLeftIcon,
+ Bars4Icon,
+ BoltIcon,
+ BookOpenIcon,
+ CalculatorIcon,
+ CheckIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ ClipboardCopyIcon,
+ CodeBracketIcon,
+ CodeBracketSquareIcon,
+ Cog8ToothIcon,
+ CommandLineIcon,
+ CommentIcon,
+ CubeTransparentIcon,
+ CurlyBracketsIcon,
+ DocumentTextIcon,
+ FireIcon,
+ GlobeIcon,
+ GroupIcon,
+ HashIcon,
+ HelpIcon,
+ LinkIcon,
+ ListBulletIcon,
+ LockIcon,
+ PauseIcon,
+ PlayIcon,
+ PuzzleIcon,
+ RectangleStackIcon,
+ ResetIcon,
+ RightArrowIcon,
+ ScaleIcon,
+ ScatterPlotIcon,
+ SearchIcon,
+ ShareIcon,
+ SquareBracketIcon,
+ TableCellsIcon,
+ UserCircleIcon,
+ UserIcon,
+ VariableIcon,
+ WrenchIcon,
+} from "./HeroIcons.js";
+import type { IconProps } from "./Icon.js";
+import { PlusIcon } from "./PlusIcon.js";
+import { RefreshIcon } from "./RefreshIcon.js";
+import { SignOutIcon } from "./SignOutIcon.js";
+import { TrashIcon } from "./TrashIcon.js";
+import { TriangleIcon } from "./TriangleIcon.js";
+import { XIcon } from "./XIcon.js";
+
+export const allIconsMap: Record | null> = {
+ AdjustmentsHorizontalIcon,
+ AdjustmentsVerticalIcon,
+ ArchiveBoxIcon,
+ BackwardIcon,
+ BarChartIcon,
+ Bars3CenterLeftIcon,
+ Bars4Icon,
+ BoltIcon,
+ BookOpenIcon,
+ CalculatorIcon,
+ CheckIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ ClipboardCopyIcon,
+ CodeBracketIcon,
+ CodeBracketSquareIcon,
+ Cog8ToothIcon,
+ CommandLineIcon,
+ CommentIcon,
+ CubeTransparentIcon,
+ CurlyBracketsIcon,
+ DocumentTextIcon,
+ DotsHorizontalIcon,
+ EditIcon,
+ EmptyIcon,
+ ErrorIcon,
+ ExternalLinkIcon,
+ FireIcon,
+ FocusIcon,
+ GlobeIcon,
+ GroupIcon,
+ HashIcon,
+ HelpIcon,
+ LinkIcon,
+ ListBulletIcon,
+ LockIcon,
+ PauseIcon,
+ PlayIcon,
+ PlusIcon,
+ PuzzleIcon,
+ RectangleStackIcon,
+ RefreshIcon,
+ ResetIcon,
+ RightArrowIcon,
+ ScaleIcon,
+ ScatterPlotIcon,
+ SearchIcon,
+ ShareIcon,
+ SignOutIcon,
+ SquareBracketIcon,
+ TableCellsIcon,
+ TrashIcon,
+ TriangleIcon,
+ UserCircleIcon,
+ UserIcon,
+ VariableIcon,
+ WrenchIcon,
+ XIcon,
+ Die1Icon,
+ Die2Icon,
+ Die3Icon,
+ Die4Icon,
+ Die5Icon,
+ Die6Icon,
+};
+
+const findByName = (name: string) => allIconsMap[name] || null;
+
+export const IconByName: FC = ({
+ name,
+ ...props
+}) => {
+ const IconComponent = findByName(name);
+
+ if (!IconComponent) {
+ return null;
+ }
+
+ return ](https://headlessui.com/react/tabs) component from Headless UI.
@@ -21,7 +21,7 @@ export const Default: Story = {
+
Code panel
Settings panel
diff --git a/packages/ui/src/stories/Forms/StyledToggle.stories.tsx b/packages/ui/src/stories/Forms/StyledToggle.stories.tsx
new file mode 100644
index 0000000000..3d04c8e700
--- /dev/null
+++ b/packages/ui/src/stories/Forms/StyledToggle.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import {
+ StyledToggle,
+ StyledToggleProps,
+} from "../../forms/styled/StyledToggle.js";
+
+const meta = { component: StyledToggle } satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+const renderToggle = (args: StyledToggleProps) => {
+ const [checked, setChecked] = useState(false);
+ return ;
+export default meta;
+type Story = StoryObj;
+
+export const AllIcons: Story = {
+ args: {
+ name: "DocumentTextIcon",
+ },
+ render: ({ size }) => (
+
+ {Object.keys(allIconsMap).map((name) => (
+
+ ))}
+
-
(
-
- Squiggle Version
- {squiggleVersions.map((version) => (
- {
- onChange(version);
- close();
- }}
- />
- ))}
- (
-
-
-
-
-
-
- {/* Markdown here would be nice, but we don't have it available in @quri/ui. */}
-
-
- We’ll auto-update your model to the most recent
- non-breaking version of Squiggle.
-
-
- However, if you use the{" "}
- Next version,
- it will always stay on the Beta - so only do this if
- you’re okay fixing it if it breaks, or temporarily if
- you need to use a feature that’s not been released
- yet.
-
-
-
- )}
- />
- ) : null}
-
- )}
- >
-
-
-
-
(
+
+ Squiggle Version
+ {squiggleVersions.map((version) => (
+ {
+ onChange(version);
+ close();
+ }}
+ />
+ ))}
+ (
+
+
+
+
+
+
+ {/* Markdown here would be nice, but we don't have it available in @quri/ui. */}
+
+
+ We’ll auto-update your model to the most recent
+ non-breaking version of Squiggle.
+
+
+ However, if you use the{" "}
+ Next version, it
+ will always stay on the Beta - so only do this if you’re
+ okay fixing it if it breaks, or temporarily if you need
+ to use a feature that’s not been released yet.
+
+
+
+ )}
+ />
+ ) : null}
+
+ )}
+ >
+ {children}
+
+ );
+};
diff --git a/packages/versioned-components/src/SquiggleVersionShower.tsx b/packages/versioned-components/src/SquiggleVersionShower.tsx
deleted file mode 100644
index 7e6e33e473..0000000000
--- a/packages/versioned-components/src/SquiggleVersionShower.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-import { FC } from "react";
-
-import { CodeBracketIcon, WrenchIcon } from "@quri/ui";
-
-import { checkSquiggleVersion, SquiggleVersion } from "./versions.js";
-
-export function versionTitle(version: SquiggleVersion) {
- return version === "dev" ? "Next" : version;
-}
-
-export function uncheckedVersionTitle(version: string) {
- const versionIsValid = checkSquiggleVersion(version);
- if (versionIsValid) {
- return versionTitle(version);
- } else {
- return `${version} (unknown)`;
- }
-}
-
-export function versionIcon(version: string) {
- return version === "dev" ? WrenchIcon : CodeBracketIcon;
-}
-
-export const SquiggleVersionShower: FC<{ version: string }> = ({ version }) => {
- const CurrentIcon = versionIcon(version);
-
- return (
-
-
-
- {uncheckedVersionTitle(version)}
-
-
-
+ showUpdatePolicy
+ >
+
+ {uncheckedVersionTitle(version)}
+
+
)}
onCodeChange={(code) => updateUrl({ defaultCode: code }, version)}