@kth/style 0.0.3 → 0.0.5

package/dist/cjs/components/Radio.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+interface RadioGroupProps {
+    /** Options */
+    children: React.ReactElement<RadioProps> | React.ReactElement<RadioProps>[];
+    /** The value of the selected radio button */
+    value: string;
+    /** The callback function when a different choice is made by the user */
+    onChange: (value: string) => void;
+}
+interface RadioProps {
+    /** The value of the radio button */
+    value: string;
+    /** The label of the radio button */
+    label: string;
+}
+/** Implemented as fancy radio buttons */
+export declare function FilterTabs({ children, value, onChange }: RadioGroupProps): JSX.Element;
+/** A single radio button */
+export declare function Radio({ value, label }: RadioProps): JSX.Element;
+export {};

package/dist/cjs/components/Select.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+interface SelectProps {
+    /** HTML form `name` */
+    name: string;
+    /** Label for the select */
+    label: string;
+    /** Select description */
+    description?: string;
+    /** Current value of the select field */
+    value: string;
+    /** Called when the select value changes */
+    onChange(value: string): void;
+    /** Options */
+    children: React.ReactElement<OptionProps | OptionGroupProps> | React.ReactElement<OptionProps | OptionGroupProps>[];
+}
+interface OptionProps {
+    /** The value for the option */
+    value: string;
+    /** Human-readable label for the option */
+    children: string;
+}
+interface OptionGroupProps {
+    label: string;
+    children: React.ReactNode;
+}
+export declare function Select({ name, label, description, value, onChange, children, }: SelectProps): JSX.Element;
+export declare function OptionGroup({ label, children }: OptionGroupProps): JSX.Element;
+export declare function Option({ value, children }: OptionProps): JSX.Element;
+export {};

package/dist/cjs/index.d.ts

@@ -1 +1,2 @@
 export { Tab, ContentTabs, NavigationTabs } from "./components/Tabs";
+export { Select, Option, OptionGroup } from "./components/Select";

package/dist/cjs/index.js

@@ -107,6 +107,26 @@ function Tab({ children }) {
     return React.createElement(React.Fragment, null, children);
 }
 
+const SelectContext = React.createContext("");
+function Select({ name, label, description, value, onChange, children, }) {
+    const id = `select-${name}`;
+    return (React.createElement(SelectContext.Provider, { value: value },
+        React.createElement("div", { className: "kth-select" },
+            React.createElement("label", { htmlFor: id }, label),
+            description && React.createElement("p", { id: `${id}-description` }, description),
+            React.createElement("select", { id: id, "aria-describedby": description && `${id}-description`, name: name, value: value, onChange: (e) => onChange(e.target.value) }, children))));
+}
+function OptionGroup({ label, children }) {
+    return React.createElement("optgroup", { label: label }, children);
+}
+function Option({ value, children }) {
+    const selectedValue = React.useContext(SelectContext);
+    return (React.createElement("option", { value: value, selected: value === selectedValue }, children));
+}
+
 exports.ContentTabs = ContentTabs;
 exports.NavigationTabs = NavigationTabs;
+exports.Option = Option;
+exports.OptionGroup = OptionGroup;
+exports.Select = Select;
 exports.Tab = Tab;

package/dist/{esm/stories/NavigationTabs.stories.d.ts → cjs/stories/FilterTabs.stories.d.ts}

@@ -1,10 +1,10 @@
 import type { StoryObj } from "@storybook/react";
-import { NavigationTabs } from "../components/Tabs";
+import { FilterTabs } from "../components/Radio";
 import "../../scss/globals.scss";
-import "../../scss/components/navigation-tabs.scss";
+import "../../scss/components/filter-tabs.scss";
 declare const meta: {
     title: string;
-    component: typeof NavigationTabs;
+    component: typeof FilterTabs;
     tags: string[];
 };
 export default meta;

package/dist/cjs/stories/Select.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from "@storybook/react";
+import { Select } from "../components/Select";
+import "../../scss/globals.scss";
+import "../../scss/components/select.scss";
+declare const meta: {
+    title: string;
+    component: typeof Select;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithDescriptions: Story;
+export declare const WithoutDescriptions: Story;

package/dist/esm/components/Radio.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+interface RadioGroupProps {
+    /** Options */
+    children: React.ReactElement<RadioProps> | React.ReactElement<RadioProps>[];
+    /** The value of the selected radio button */
+    value: string;
+    /** The callback function when a different choice is made by the user */
+    onChange: (value: string) => void;
+}
+interface RadioProps {
+    /** The value of the radio button */
+    value: string;
+    /** The label of the radio button */
+    label: string;
+}
+/** Implemented as fancy radio buttons */
+export declare function FilterTabs({ children, value, onChange }: RadioGroupProps): JSX.Element;
+/** A single radio button */
+export declare function Radio({ value, label }: RadioProps): JSX.Element;
+export {};

package/dist/esm/components/Select.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+interface SelectProps {
+    /** HTML form `name` */
+    name: string;
+    /** Label for the select */
+    label: string;
+    /** Select description */
+    description?: string;
+    /** Current value of the select field */
+    value: string;
+    /** Called when the select value changes */
+    onChange(value: string): void;
+    /** Options */
+    children: React.ReactElement<OptionProps | OptionGroupProps> | React.ReactElement<OptionProps | OptionGroupProps>[];
+}
+interface OptionProps {
+    /** The value for the option */
+    value: string;
+    /** Human-readable label for the option */
+    children: string;
+}
+interface OptionGroupProps {
+    label: string;
+    children: React.ReactNode;
+}
+export declare function Select({ name, label, description, value, onChange, children, }: SelectProps): JSX.Element;
+export declare function OptionGroup({ label, children }: OptionGroupProps): JSX.Element;
+export declare function Option({ value, children }: OptionProps): JSX.Element;
+export {};

package/dist/esm/index.d.ts

@@ -1 +1,2 @@
 export { Tab, ContentTabs, NavigationTabs } from "./components/Tabs";
+export { Select, Option, OptionGroup } from "./components/Select";

package/dist/esm/index.js

@@ -105,4 +105,21 @@ function Tab({ children }) {
     return React.createElement(React.Fragment, null, children);
 }
 
-export { ContentTabs, NavigationTabs, Tab };
+const SelectContext = React.createContext("");
+function Select({ name, label, description, value, onChange, children, }) {
+    const id = `select-${name}`;
+    return (React.createElement(SelectContext.Provider, { value: value },
+        React.createElement("div", { className: "kth-select" },
+            React.createElement("label", { htmlFor: id }, label),
+            description && React.createElement("p", { id: `${id}-description` }, description),
+            React.createElement("select", { id: id, "aria-describedby": description && `${id}-description`, name: name, value: value, onChange: (e) => onChange(e.target.value) }, children))));
+}
+function OptionGroup({ label, children }) {
+    return React.createElement("optgroup", { label: label }, children);
+}
+function Option({ value, children }) {
+    const selectedValue = React.useContext(SelectContext);
+    return (React.createElement("option", { value: value, selected: value === selectedValue }, children));
+}
+
+export { ContentTabs, NavigationTabs, Option, OptionGroup, Select, Tab };

package/dist/{cjs/stories/NavigationTabs.stories.d.ts → esm/stories/FilterTabs.stories.d.ts}

@@ -1,10 +1,10 @@
 import type { StoryObj } from "@storybook/react";
-import { NavigationTabs } from "../components/Tabs";
+import { FilterTabs } from "../components/Radio";
 import "../../scss/globals.scss";
-import "../../scss/components/navigation-tabs.scss";
+import "../../scss/components/filter-tabs.scss";
 declare const meta: {
     title: string;
-    component: typeof NavigationTabs;
+    component: typeof FilterTabs;
     tags: string[];
 };
 export default meta;

package/dist/esm/stories/Select.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from "@storybook/react";
+import { Select } from "../components/Select";
+import "../../scss/globals.scss";
+import "../../scss/components/select.scss";
+declare const meta: {
+    title: string;
+    component: typeof Select;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithDescriptions: Story;
+export declare const WithoutDescriptions: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
@@ -46,5 +46,6 @@
   },
   "peerDependencies": {
     "react": "*"
-  }
+  },
+  "gitHead": "27fc1ecc1982cbb162ddc6dbab504ced561af7d3"
 }

package/scss/components/filter-tabs.scss

@@ -0,0 +1,31 @@
+@use "../tokens/" as t;
+
+@layer kth-style {
+  .kth-filter-tabs {
+    border: none;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+
+    input[type="radio"] {
+      appearance: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    label {
+      display: inline-block;
+      padding-inline: var(--kth-0-clickable-padding-inline);
+      padding-block: var(--kth-0-clickable-padding-block);
+    }
+
+    input:focus + label {
+      outline: 2px solid t.$color-primary-5;
+      outline-offset: -#{t.$space-6};
+    }
+
+    input:checked + label {
+      border-bottom: t.$space-2 t.$color-primary-5 solid;
+    }
+  }
+}

package/scss/components/select.scss

@@ -0,0 +1,24 @@
+@use "../tokens/" as t;
+
+@layer kth-style {
+  .kth-select {
+    margin-block: t.$space-24;
+
+    label {
+      display: inline-block;
+      font-weight: 600;
+    }
+
+    p {
+      margin: t.$space-4 0;
+    }
+
+    select {
+      margin-top: t.$space-8;
+      padding-inline: var(--kth-0-clickable-padding-inline);
+      padding-block: calc(var(--kth-0-clickable-padding-block) - 1px);
+      border-radius: t.$space-4;
+      border-block: 1px solid t.$color-neutral-10;
+    }
+  }
+}

package/dist/cjs/components/Button.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-import "./button.css";
-interface ButtonProps {
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary?: boolean;
-    /**
-     * What background color to use
-     */
-    backgroundColor?: string;
-    /**
-     * How large should the button be?
-     */
-    size?: "small" | "medium" | "large";
-    /**
-     * Button contents
-     */
-    label: string;
-    /**
-     * Optional click handler
-     */
-    onClick?: () => void;
-}
-/**
- * Primary UI component for user interaction
- */
-export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => JSX.Element;
-export {};

package/dist/cjs/components/Something.d.ts

@@ -1 +0,0 @@
-export declare function hello2(): void;

package/dist/esm/components/Button.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-import "./button.css";
-interface ButtonProps {
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary?: boolean;
-    /**
-     * What background color to use
-     */
-    backgroundColor?: string;
-    /**
-     * How large should the button be?
-     */
-    size?: "small" | "medium" | "large";
-    /**
-     * Button contents
-     */
-    label: string;
-    /**
-     * Optional click handler
-     */
-    onClick?: () => void;
-}
-/**
- * Primary UI component for user interaction
- */
-export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => JSX.Element;
-export {};

package/dist/esm/components/Something.d.ts

@@ -1 +0,0 @@
-export declare function hello2(): void;

package/scss/components/navigation-tabs.scss

@@ -1,53 +0,0 @@
-@use "../tokens/" as t;
-
-$border-secondary: 1px solid t.$color-neutral-10;
-
-@layer kth-style {
-  .kth-navigation-tabs {
-    overflow: auto;
-
-    [role="tablist"] {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: inline-flex;
-      flex-wrap: nowrap;
-      align-items: end;
-      gap: t.$space-4;
-      min-width: 100%;
-      border-block-end: $border-secondary;
-    }
-
-    [role="tab"] {
-      font: inherit;
-      background: none;
-      border: none;
-      box-sizing: border-box;
-      padding-inline: var(--kth-0-clickable-padding-inline);
-      padding-block: var(--kth-0-clickable-padding-block);
-      white-space: nowrap;
-      display: block;
-      text-decoration: none;
-      color: t.$color-neutral-10;
-      margin-block-end: -1px;
-
-      &:focus {
-        outline-offset: -#{t.$space-4};
-      }
-
-      &:hover {
-        text-decoration: underline;
-      }
-
-      &[aria-selected="false"] {
-        color: t.$color-neutral-10;
-      }
-
-      &[aria-selected="true"] {
-        color: t.$color-primary-5;
-        padding-block-end: calc(var(--kth-0-clickable-padding-block) - 3px);
-        border-block-end: 3px t.$color-primary-5 solid;
-      }
-    }
-  }
-}