@keboola/design 14.0.0 → 15.1.0

package/dist/styles-DxazJ8Mz.js

@@ -0,0 +1,81 @@
+import { cva } from "class-variance-authority";
+//#region src/components/RadioGroup/styles.ts
+/** The radio's circle: shape and checked state, shared by the form `Radio` and the menu radio. */
+const radioCircleVariants = cva([
+	"tw:shrink-0",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:size-4",
+	"tw:rounded-full",
+	"tw:border",
+	"tw:border-solid",
+	"tw:border-input",
+	"tw:transition-colors",
+	"tw:data-[state=checked]:bg-primary",
+	"tw:data-[state=checked]:border-primary"
+]);
+/** The form `Radio`'s button states, layered on `radioCircleVariants`. */
+const radioVariants = cva([
+	"tw:bg-transparent",
+	"tw:p-0",
+	"tw:peer",
+	"tw:cursor-pointer",
+	"tw:whitespace-nowrap",
+	"tw:disabled:cursor-not-allowed",
+	"tw:disabled:opacity-disabled",
+	"tw:data-[state=unchecked]:not-disabled:hover:bg-hover",
+	"tw:data-[state=checked]:not-disabled:hover:bg-primary",
+	"tw:focus-visible:outline-hidden",
+	"tw:focus-visible:border-primary",
+	"tw:focus-visible:ring-2",
+	"tw:focus-visible:ring-ring/50"
+]);
+const radioIndicatorVariants = cva([
+	"tw:size-2.5",
+	"tw:fill-current",
+	"tw:text-primary-foreground"
+]);
+const radioItemButtonVariants = cva([
+	"tw:bg-transparent",
+	"tw:p-0",
+	"tw:peer",
+	"tw:cursor-pointer",
+	"tw:whitespace-nowrap",
+	"tw:flex",
+	"tw:items-center",
+	"tw:justify-center",
+	"tw:disabled:cursor-not-allowed",
+	"tw:w-full",
+	"tw:px-2",
+	"tw:py-1.5",
+	"tw:uppercase",
+	"tw:font-semibold",
+	"tw:font-sans",
+	"tw:text-[11px]",
+	"tw:whitespace-nowrap",
+	"tw:tracking-widest",
+	"tw:leading-[18px]",
+	"tw:border",
+	"tw:border-solid",
+	"tw:rounded",
+	"tw:disabled:opacity-disabled",
+	"tw:text-foreground",
+	"tw:border-input",
+	"tw:transition-colors",
+	"tw:data-[state=unchecked]:bg-muted",
+	"tw:data-[state=unchecked]:not-disabled:hover:bg-hover",
+	"tw:data-[state=unchecked]:not-disabled:hover:text-hover-foreground",
+	"tw:data-[state=checked]:bg-primary",
+	"tw:data-[state=checked]:border-primary",
+	"tw:data-[state=checked]:text-primary-foreground",
+	"tw:data-[state=checked]:not-disabled:cursor-default",
+	"tw:focus-visible:outline-hidden",
+	"tw:focus-visible:border-primary",
+	"tw:focus-visible:ring-2",
+	"tw:focus-visible:ring-ring/50"
+]);
+//#endregion
+export { radioCircleVariants, radioIndicatorVariants, radioItemButtonVariants, radioVariants };
+
+//# sourceMappingURL=styles-DxazJ8Mz.js.map

package/dist/styles-DxazJ8Mz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-DxazJ8Mz.js","names":[],"sources":["../src/components/RadioGroup/styles.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/** The radio's circle: shape and checked state, shared by the form `Radio` and the menu radio. */\nexport const radioCircleVariants = cva([\n  'tw:shrink-0',\n  'tw:flex',\n  'tw:items-center',\n  'tw:justify-center',\n  'tw:size-4',\n  'tw:rounded-full',\n  'tw:border',\n  'tw:border-solid',\n  'tw:border-input',\n  'tw:transition-colors',\n  'tw:data-[state=checked]:bg-primary',\n  'tw:data-[state=checked]:border-primary',\n]);\n\n/** The form `Radio`'s button states, layered on `radioCircleVariants`. */\nexport const radioVariants = cva([\n  // reset\n  'tw:bg-transparent',\n  'tw:p-0',\n  'tw:peer',\n  'tw:cursor-pointer',\n  'tw:whitespace-nowrap',\n\n  'tw:disabled:cursor-not-allowed',\n  'tw:disabled:opacity-disabled',\n\n  'tw:data-[state=unchecked]:not-disabled:hover:bg-hover',\n  'tw:data-[state=checked]:not-disabled:hover:bg-primary',\n\n  'tw:focus-visible:outline-hidden',\n  'tw:focus-visible:border-primary',\n  'tw:focus-visible:ring-2',\n  'tw:focus-visible:ring-ring/50',\n]);\n\nexport const radioIndicatorVariants = cva([\n  'tw:size-2.5',\n  'tw:fill-current',\n  'tw:text-primary-foreground',\n]);\n\nexport const radioItemButtonVariants = cva([\n  // reset\n  'tw:bg-transparent',\n  'tw:p-0',\n  'tw:peer',\n  'tw:cursor-pointer',\n  'tw:whitespace-nowrap',\n\n  // position\n  'tw:flex',\n  'tw:items-center',\n  'tw:justify-center',\n\n  'tw:disabled:cursor-not-allowed',\n\n  // layouts\n  'tw:w-full',\n  'tw:px-2',\n  'tw:py-1.5',\n\n  // fonts\n  'tw:uppercase',\n  'tw:font-semibold',\n  'tw:font-sans',\n  'tw:text-[11px]',\n  'tw:whitespace-nowrap',\n  'tw:tracking-widest',\n  'tw:leading-[18px]',\n\n  // border\n  'tw:border',\n  'tw:border-solid',\n  'tw:rounded',\n\n  'tw:disabled:opacity-disabled',\n  'tw:text-foreground',\n  'tw:border-input',\n  'tw:transition-colors',\n\n  // muted filled control surface — gray, distinct from white containers; not the app-background token\n  'tw:data-[state=unchecked]:bg-muted',\n  'tw:data-[state=unchecked]:not-disabled:hover:bg-hover',\n  'tw:data-[state=unchecked]:not-disabled:hover:text-hover-foreground',\n\n  'tw:data-[state=checked]:bg-primary',\n  'tw:data-[state=checked]:border-primary',\n  'tw:data-[state=checked]:text-primary-foreground',\n  'tw:data-[state=checked]:not-disabled:cursor-default',\n\n  'tw:focus-visible:outline-hidden',\n  'tw:focus-visible:border-primary',\n  'tw:focus-visible:ring-2',\n  'tw:focus-visible:ring-ring/50',\n]);\n"],"mappings":";;;AAGA,MAAa,sBAAsB,IAAI;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;AAGD,MAAa,gBAAgB,IAAI;CAE/B;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,yBAAyB,IAAI;CACxC;CACA;CACA;AACF,CAAC;AAED,MAAa,0BAA0B,IAAI;CAEzC;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CAEA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;AACF,CAAC"}

package/dist/styles-T8xwr0sR.js

@@ -0,0 +1,73 @@
+import { cva } from "class-variance-authority";
+//#region src/components/OverlayTrigger/styles.ts
+/**
+* Chrome for a control that looks like an input but opens an overlay on click. Shared by
+* `SelectTrigger` and `DateRangePicker`'s trigger so both sit at the same height and colour when
+* they stand next to each other in a filter row.
+*/
+const overlayTriggerVariants = cva([
+	"tailwindcss-preflight",
+	"tw:group",
+	"tw:box-border",
+	"tw:inline-flex",
+	"tw:items-center",
+	"tw:justify-between",
+	"tw:gap-2",
+	"tw:w-full",
+	"tw:text-left",
+	"tw:h-9",
+	"tw:min-h-9",
+	"tw:px-4",
+	"tw:py-2",
+	"tw:text-sm/[18px]",
+	"tw:rounded-[var(--radius-lg,0.25rem)]",
+	"tw:border",
+	"tw:border-solid",
+	"tw:border-input",
+	"tw:bg-muted",
+	"tw:text-foreground",
+	"tw:transition-[color,background-color,border-color,box-shadow]",
+	"tw:!outline-hidden",
+	"tw:focus:ring-4",
+	"tw:data-[state=open]:ring-4",
+	"tw:disabled:cursor-not-allowed",
+	"tw:aria-disabled:cursor-not-allowed",
+	"tw:disabled:opacity-disabled",
+	"tw:aria-disabled:opacity-disabled",
+	"tw:aria-[invalid=true]:border-destructive",
+	"tw:aria-[invalid=true]:focus:border-destructive",
+	"tw:aria-[invalid=true]:focus:ring-destructive/20",
+	"tw:aria-[invalid=true]:data-[state=open]:border-destructive",
+	"tw:aria-[invalid=true]:data-[state=open]:ring-destructive/20",
+	"tw:data-[placeholder]:text-muted-foreground",
+	"tw:[&_svg]:shrink-0",
+	"tw:[&_svg]:pointer-events-none"
+], {
+	defaultVariants: { state: "default" },
+	variants: { state: {
+		default: [
+			"tw:focus:border-primary",
+			"tw:focus:ring-ring/50",
+			"tw:data-[state=open]:border-primary",
+			"tw:data-[state=open]:ring-ring/50"
+		],
+		error: [
+			"tw:border-destructive",
+			"tw:focus:border-destructive",
+			"tw:focus:ring-destructive/20",
+			"tw:data-[state=open]:border-destructive",
+			"tw:data-[state=open]:ring-destructive/20"
+		],
+		warning: [
+			"tw:border-warning-500",
+			"tw:focus:border-warning-500",
+			"tw:focus:ring-warning/20",
+			"tw:data-[state=open]:border-warning-500",
+			"tw:data-[state=open]:ring-warning/20"
+		]
+	} }
+});
+//#endregion
+export { overlayTriggerVariants };
+
+//# sourceMappingURL=styles-T8xwr0sR.js.map

package/dist/styles-T8xwr0sR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles-T8xwr0sR.js","names":[],"sources":["../src/components/OverlayTrigger/styles.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * Chrome for a control that looks like an input but opens an overlay on click. Shared by\n * `SelectTrigger` and `DateRangePicker`'s trigger so both sit at the same height and colour when\n * they stand next to each other in a filter row.\n */\nexport const overlayTriggerVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group',\n    'tw:box-border',\n\n    // layout\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:justify-between',\n    'tw:gap-2',\n    'tw:w-full',\n    'tw:text-left',\n\n    // 36 px tall, border included — the height of every text input\n    'tw:h-9',\n    'tw:min-h-9',\n    'tw:px-4',\n    'tw:py-2',\n    'tw:text-sm/[18px]',\n\n    // base appearance — a grey inset field like `InputGroup`, on the brand radius\n    'tw:rounded-[var(--radius-lg,0.25rem)]',\n    'tw:border',\n    'tw:border-solid',\n    'tw:border-input',\n    'tw:bg-muted',\n    'tw:text-foreground',\n    // Scoped transition (no `outline`) — prevents the UA focus-outline color\n    // from interpolating through its dark default during state changes.\n    'tw:transition-[color,background-color,border-color,box-shadow]',\n\n    // focus base — ring width here, color comes from state variant\n    'tw:!outline-hidden',\n    'tw:focus:ring-4',\n    'tw:data-[state=open]:ring-4',\n\n    // disabled\n    'tw:disabled:cursor-not-allowed',\n    'tw:aria-disabled:cursor-not-allowed',\n    'tw:disabled:opacity-disabled',\n    'tw:aria-disabled:opacity-disabled',\n\n    // `aria-invalid` on the trigger surfaces the error chrome without a `state` prop.\n    'tw:aria-[invalid=true]:border-destructive',\n    'tw:aria-[invalid=true]:focus:border-destructive',\n    'tw:aria-[invalid=true]:focus:ring-destructive/20',\n    'tw:aria-[invalid=true]:data-[state=open]:border-destructive',\n    'tw:aria-[invalid=true]:data-[state=open]:ring-destructive/20',\n\n    // placeholder (Radix sets data-placeholder on the trigger when no value)\n    'tw:data-[placeholder]:text-muted-foreground',\n\n    // child svg defaults\n    'tw:[&_svg]:shrink-0',\n    'tw:[&_svg]:pointer-events-none',\n  ],\n  {\n    defaultVariants: {\n      state: 'default',\n    },\n    variants: {\n      state: {\n        default: [\n          'tw:focus:border-primary',\n          'tw:focus:ring-ring/50',\n          'tw:data-[state=open]:border-primary',\n          'tw:data-[state=open]:ring-ring/50',\n        ],\n        error: [\n          'tw:border-destructive',\n          'tw:focus:border-destructive',\n          'tw:focus:ring-destructive/20',\n          'tw:data-[state=open]:border-destructive',\n          'tw:data-[state=open]:ring-destructive/20',\n        ],\n        warning: [\n          'tw:border-warning-500',\n          'tw:focus:border-warning-500',\n          'tw:focus:ring-warning/20',\n          'tw:data-[state=open]:border-warning-500',\n          'tw:data-[state=open]:ring-warning/20',\n        ],\n      },\n    },\n  },\n);\n"],"mappings":";;;;;;;AAOA,MAAa,yBAAyB,IACpC;CACE;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;AACF,GACA;CACE,iBAAiB,EACf,OAAO,UACT;CACA,UAAU,EACR,OAAO;EACL,SAAS;GACP;GACA;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;EACA,SAAS;GACP;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF"}